<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            outline: none;
            border: 1px solid red;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <input type="text" id="user">
    <button id="btn">点击</button>
</body>
<script>
    // 字符串的拓展方法
    // 语法  字符串.方法()

    // "a"  单个字符
    // "aaaa"  字符串(可以理解为 字符串中 每两个字符之间用"" 拼接)
    // console.log("a" + "" + "b" + "" + "c");


    // 数组拼接形成字符串  (join() 用特定的字符将数组拼接形成字符串)

    // var arr = ["a", "b", "c", "d"];
    // var str = arr.join("-");
    // var str = arr.join("+");
    // var str = arr.join("/");
    // var str = arr.join("");   // "a"+""+"b"  -> 数组中的字符直接拼接
    // console.log(str);

    // split()   用特定的字符将字符串分隔为数组
    // 返回值: 拆分后的数组

    // var arr = str.split("-");
    // var arr = str.split("+");
    // var arr = str.split("/");
    // var arr = str.split("");  // 拆分字符串为单个字符
    // console.log(arr);


    // toUpperCase()  字母转大写
    // toLowerCase()  字母转小写


    // var str = "0123456789abcdefABCDEF+-*/%";

    // var newStr = "";
    // for (var char of str) {
    //     var index = smallList.indexOf(char);
    //     if (index != -1) {
    //         newStr += bigList[index];
    //     } else {
    //         newStr += char;
    //     }
    // }

    // var result = str.toUpperCase();
    // console.log(result);

    // var result = str.toLowerCase();
    // console.log(result);



    // trim()  去除首尾空格 
    // trimLeft()  去除头部空格 
    // trimRight()  去除尾部空格 


    var userInp = document.getElementById("user");
    var btn = document.getElementById("btn");

    /* userInp.onblur = function () {
        // var user = userInp.value.trim();
        // var user = userInp.value.trimLeft();
        // var user = userInp.value.trimRight();
        // console.log(1, user);

        var user = userInp.value.trim();  // 取值 -> 去空格
        console.log(1, user);

        userInp.value = user; // 将优化后的字符串 => 更新到页面中
    } */


    btn.onclick = function () {
        // var user = userInp.value.trim();
        // var user = userInp.value.trimLeft();
        // var user = userInp.value.trimRight();
        // console.log(1, user);

        var user = userInp.value.trim();  // 取值 -> 去空格
        console.log(1, user);

        userInp.value = user; // 将优化后的字符串 => 更新到页面中
    }
















</script>

</html>